<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body> 
 <div style="width: 95%; position: relative;top: 30px; margin: auto;">
<div class="demoTable" >
  输入订单号：
  <div class="layui-inline">
    <input class="layui-input" name="id" id="demoReload" autocomplete="off">
  </div>
  <button class="layui-btn" data-type="reload">查询</button>
	<button class="layui-btn" data-type="">新增票据</button>
</div>
 
<table class="layui-hide" id="LAY_table_user" lay-filter="user"></table> 
 </div>              
          
<script src="../layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script type="text/html" id="toolDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm " lay-event="add">修改</button>
		<button class="layui-btn layui-btn-sm " lay-event="delete">删除</button>
  </div>
</script>

<script>
layui.use('table', function(){
  var table = layui.table;
  //方法级渲染
  table.render({
    elem: '#LAY_table_user'
	// ,toolbar: '#toolbarDemo'
    ,url: '/arrival/showAllBillDetailed'
    ,cols: [[
      {checkbox: true, fixed: true}
      ,{field:'billCode', title: '单据编号',  fixed: true ,sort:true}
      ,{field:'billType', title: '单据类型', width:200}
      ,{field:'billState', title: '单据状态', width:250}
      ,{field:'writeDate', title: '填写日期',width:300}
	  ,{field: 'right',title:'操作',toolbar:'#toolDemo',width:300}
    ]]
    ,id: 'testReload'
    ,page: true	
    // ,height: 470
  });

//监听事件
/* table.on('tool(test)', function(obj){
  var checkStatus = table.checkStatus(obj.config.id);
  switch(obj.event){
    case 'add':
      layer.msg('验收');
	  // alert("1111");
    break;
  };
}); */
//监听行工具事件
 table.on('tool(user)', function(obj){
    var data = obj.data;
    //console.log(obj)
    if(obj.event === 'delete'){
      layer.confirm('删除后无法恢复，确认要删除吗',{
				btn:['确认','取消']//按钮
			},function(){
				layer.msg('确认');
			},function(){
				layer.msg('取消');
			});
    } 
  });
  
  var $ = layui.$, active = {
    reload: function(){
      var demoReload = $('#demoReload');
      
      //执行重载
      table.reload('testReload', {
        where: {
          key: {
            id: demoReload.val()
          }
        }
      }, 'data');
    }
  };
  
  $('.demoTable .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });
});
</script>

</body>
</html>